<template>
  <v-layout title="其他收入修改">
    <el-row type="flex" justify="center" class="confirm">
      <el-col :xl="14" :lg="18" :md="20" :sm="24" :xs="24">
        <div class="order-status">{{orderStatus}}</div>
        <v-form
          :form-title="formTitle"
          :form-data="formData"
          label-width="100px"
        />
        <el-card class="mt15">
          <el-form inline label-width="100px">
            <el-form-item label="收款" size="mini">
              <el-input :disabled="true" v-model="wlReceipt" placeholder="123"/>
            </el-form-item>
            <el-button type="primary" size="mini" @click="showWlTable=!showWlTable">{{showWlTable?'收起':'展开'}}明细
            </el-button>
            <el-button type="primary" size="mini" @click="addWlReceipt">添加收款</el-button>
          </el-form>
          <el-collapse-transition>
            <div v-show="showWlTable">
              <v-table
                :select="false"
                :table-title="wlReceiptTableTitle"
                :table-data="wlReceiptTableData"
                :default-operate="financeRole"
                btn-class="btn"
                @del="delWl"
                @edit="editWl"
              />
            </div>
          </el-collapse-transition>
        </el-card>

        <el-card class="mt15">
          <el-form inline label-width="100px">
            <el-form-item label="采购成本明细" size="mini">
              <el-input :disabled="true" v-model="wlProcurement" placeholder="123"/>
            </el-form-item>
            <el-button type="primary" size="mini" @click="showWlTable2=!showWlTable2">{{showWlTable2?'收起':'展开'}}明细
            </el-button>
            <el-button type="primary" size="mini" @click="addwlProcurement">添加</el-button>
          </el-form>
          <el-collapse-transition>
            <div v-show="showWlTable2">
              <v-table
                :select="false"
                :table-title="wlProcurementTableTitle"
                :table-data="wlProcurementTableData"
                :default-operate="financeRole"
                btn-class="btn"
                @del="delwlProcurement"
                @edit="editWlwlProcurement"
              />
            </div>
          </el-collapse-transition>
        </el-card>

        <el-row v-if="financeRole" type="flex" justify="end" class="mt15">
          <el-button type="primary" size="small" @click="confirm"> 确定</el-button>
        </el-row>
      </el-col>
    </el-row>


    <!--添加/修改微萊收款-->
    <el-dialog :visible.sync="dialogVisible" title="添加/修改收款" width="30%">
      <el-form label-width="120px" size="mini">
        <el-form-item label="收款金额">
          <el-input v-model="addWlReceiptData.money"/>
        </el-form-item>
        <el-form-item label="收款账户">
          <el-input v-model="addWlReceiptData.bank_account"/>
        </el-form-item>

        <el-form-item label="收款时间">
          <el-date-picker
            v-model="addWlReceiptData.create_date"
            value-format="yyyy-MM-dd"
            type="date"/>
        </el-form-item>
        <el-form-item label="发票号">
          <el-input v-model="addWlReceiptData.bill_num"/>
        </el-form-item>
        <el-form-item label="开票公司">
          <el-input v-model="addWlReceiptData.bill_company"/>
        </el-form-item>
        <el-form-item label="开票金额">
          <el-input v-model="addWlReceiptData.bill_price"/>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button size="small" @click="cancel">取消</el-button>
        <el-button size="small" @click="modifyReceiptRecord">确定</el-button>
      </el-row>
    </el-dialog>


    <!--添加/修改采购成本明细-->
    <el-dialog :visible.sync="dialogVisible2" title="添加/修改采购成本明细" width="30%">
      <el-form label-width="120px" size="mini">
        <el-form-item label="付款日期">
          <el-date-picker
            v-model="addwlProcurementData.payment_date"
            value-format="yyyy-MM-dd"
            type="date"/>
        </el-form-item>
        <el-form-item :label=i.cn v-for=" i in wlProcurementTableTitle" v-if="i.en!='payment_date'">
          <el-input v-model="addwlProcurementData[i.en]"/>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button size="small" @click="cancel2">取消</el-button>
        <el-button size="small" @click="modifyProcurement">确定</el-button>
      </el-row>
    </el-dialog>
  </v-layout>
</template>

<script>
    import {parseTime} from '@/utils'
    import auth from '@/mixins/auth'

    export default {
        mixins: [auth],
        data() {
            return {
                ad_id: 0,
                index: false, // 编辑微萊收款
                showWlTable: true,
                showWlTable2: true,
                formData: {},
                // 公众号列表
                tencentList: [],

                swList: [],

                addUrl: 'url', // 添加收款的地址
                // 开票公司列表
                companyList: [],

                addWlReceiptData: {},
                addwlProcurementData: {},
                orderStatus: '',
                dialogVisible: false,
                dialogVisible2: false,
                msg: '',
                wlReceiptTableData: [],
                wlProcurementTableData: [],

                wlReceiptTableTitle: [
                    {
                        cn: '收款',
                        en: 'money'
                    },
                    {
                        cn: '收款账户',
                        en: 'bank_account'
                    },

                    {
                        cn: '收款时间',
                        en: 'create_date'
                    },
                    {
                        cn: '发票号',
                        en: 'bill_num',
                        // disabled: !this.financeRole
                    },
                    {
                        cn: '开票公司',
                        en: 'bill_company',
                        // type: 'autocomplete',
                        // disabled: !this.financeRole,
                        // list: this.companyList
                    },
                    {
                        cn: '开票金额',
                        en: 'bill_price',
                        // disabled: !this.financeRole
                    },
                    {
                        cn: '修改时间',
                        en: 'update_date'
                    }
                ],
                wlProcurementTableTitle: [
                    {
                        cn: '付款日期',
                        en: 'payment_date'
                    },
                    {
                        cn: '付款金额',
                        en: 'payment_money'
                    },
                    {
                        cn: '付款账号',
                        en: 'payment_account'
                    },
                    {
                        cn: '供应商名称',
                        en: 'payment_company',

                    },
                    {
                        cn: '付款发票号',
                        en: 'payment_bill_num',
                        // disabled: !this.financeRole
                    },
                ],
            }
        },
        computed: {

            wlReceipt() {
                let data = 0
                this.wlReceiptTableData && this.wlReceiptTableData.forEach(item => {
                    data += (+item.money || 0)
                })
                return data || 0
            },
            wlProcurement() {
                let data = 0
                this.wlProcurementTableData && this.wlProcurementTableData.forEach(item => {
                    data += (+item.payment_money || 0)
                })
                return data || 0
            },
            formTitle() {
                return ([
                    {
                        cn: 'id',
                        en: 'id',
                        disabled: true
                        // sortable: true
                    },
                    {
                        cn: '登记人',
                        en: 'name',
                        disabled: true
                        // sortable: true
                    },
                    {
                        cn: '项目类型',
                        en: 'project_type',
                        type: 'select',
                        list: [
                            {
                                label: '代运营',
                                value: '代运营'
                            },
                            {
                                label: '线下活动',
                                value: '线下活动'
                            },
                            {
                                label: 'TVC视频',
                                value: 'TVC视频'
                            },
                            {
                                label: '文旅项目',
                                value: '文旅项目'
                            }
                        ]
                        // sortable: true
                    },
                    {
                        cn: '数字藏品类型',
                        en: 'digital_collection_type',
                        type: 'select',
                        list: [
                            {
                                label: '园区',
                                value: '园区'
                            },
                            {
                                label: '博物馆',
                                value: '博物馆'
                            }, {
                                label: '景区',
                                value: '景区'
                            },
                            {
                                label: '文创',
                                value: '文创'
                            }
                        ]
                        // sortable: true
                    },
                    {
                        cn: '所属公司',
                        en: 'affiliated_company',
                        type: 'select',
                        list: [
                            {
                                label: '旭航',
                                value: '旭航'
                            },
                            {
                                label: '微赞',
                                value: '微赞'
                            },
                            {
                                label: '迩尚',
                                value: '迩尚'
                            },
                            {
                                label: '城觅',
                                value: '城觅'
                            }
                        ]
                    },
                    {
                        cn: '客户公司全称',
                        en: 'client_company_full_name',
                        // sortable: true
                    }, {
                        cn: '客户公司简称',
                        en: 'client_company_abbreviation',
                        // sortable: true
                    },
                    {
                        cn: '我方公司合同主体',
                        en: 'subject_of_contract'
                    },
                    {
                        cn: '项目起始日期',
                        en: 'start_date',
                        type: 'time',
                    },
                    {
                        cn: '项目终止日期',
                        en: 'end_date',
                        type: 'time',
                    },
                    {
                        cn: '合同金额',
                        en: 'contract_amount',
                        // sortable: true,
                        type: 'money'
                    },
                    {
                        cn: '代运营项目',
                        en: 'agent_operation_type',
                        // sortable: true
                    },
                    {
                        cn: '分期月数',
                        en: 'months_by_stages',
                        // sortable: true
                    },
                    {
                        cn: '采购成本',
                        en: 'procurement_cost',
                        type: 'money'
                    },
                    {
                        cn: '备注',
                        en: 'remarks',

                    },
                ])
            },

        },
        activated() {
            const {details} = this.$route.query
            this.ad_id = JSON.parse(details).id
            // if(details){
            //   this.formData = JSON.parse(details)
            //  }
            this.getOrderDetail()
            // this.getCompanyList()
        },
        methods: {
            // 获取开票公司列表
            getCompanyList() {
                // let data = {id:this.fans_id};
                this.$post('action/InvoiceInformation/find')
                    .then(res => {
                        this.companyList = res.data.map(item => {
                            const obj = {}
                            obj.label = item.开票公司名称
                            obj.value = item.开票公司名称
                            return obj
                        })
                    })
            },
            addWlReceipt() {
                this.addWlReceiptData = {}
                this.showDialog()
            },

            showDialog() {
                this.dialogVisible = true
            },
            // 撤销修改
            reject() {
                this.check(1)
            },
            cancel() {
                this.dialogVisible = false
            },
            // 确认修改广告订单
            confirm() {
                this.check(2)
            },

            check(status) {
                const data = this.formData

                if (status === 1) {
                    data.msg = this.msg
                }
                this.$post('action/OtherIncome/update', data)
                    .then(res => {
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        })
                        setTimeout(() => this.$router.go(-1), 1000)
                        this.cancel()

                    })
            },
            delWl(val) { // 删除微萊收款信息
                const data = {id: val.row.id}
                this.$post('action/OtherIncome/receiptrecord_del', data)
                    .then(res => {
                        this.getOrderDetail('receiptrecord')
                        this.$message({message: res.msg, type: 'success'})
                    })
            },
            editWl(val) { // 修改微萊收款信息
                this.index = val.$index
                this.addWlReceiptData = this.$deepClone(val.row)
                this.showDialog()
            },

            // 新增/修改广告订单收款记录
            modifyReceiptRecord(val) {
                const data = {
                    adv_id: this.ad_id,
                    ...this.addWlReceiptData,
                    update_date: parseTime(new Date())
                }
                this.$post('action/OtherIncome/receiptrecord_save', data)
                    .then(res => {
                        this.$message({message: res.msg, type: 'success'})
                        if (this.addWlReceiptData.id) {
                            this.$set(this.wlReceiptTableData, this.index, data)
                        } else {
                            this.getOrderDetail('receiptrecord')
                        }
                        this.index = 0
                        this.cancel()
                    })
            },

            // 获取广告订单详情
            getOrderDetail(type) {
                const data = {
                    ad_id: this.ad_id
                }
                this.$get('action/OtherIncome/qryOp', data)
                    .then(res => {

                        if (!type) {
                            this.formData = res.data.Advs || {}
                        }
                        if (!type || type == 'receiptrecord') {
                            this.wlReceiptTableData = res.data.receiptrecord
                        }
                        if (!type || type == 'procurement') {
                            this.wlProcurementTableData = res.data.procurement
                        }

                    })
                    .catch(err => {
                        console.log(err)
                        this.$router.go(-1)
                    })
            },

            addwlProcurement() {
                this.addwlProcurementData = {}
                this.showDialog2()
            },
            showDialog2() {
                this.dialogVisible2 = true
            },
            cancel2() {
                this.dialogVisible2 = false
            },
            delwlProcurement(val) { // 删除微萊付款信息
                const data = {id: val.row.id}
                this.$post('action/OtherIncome/procurement_del', data)
                    .then(res => {
                        this.getOrderDetail('procurement')
                        this.$message({message: res.msg, type: 'success'})
                    })
            },
            editWlwlProcurement(val) { // 修改微萊付款信息
                this.index2 = val.$index
                this.addwlProcurementData = this.$deepClone(val.row)
                this.showDialog2()
            },

            // 新增/修改付款记录
            modifyProcurement(val) {
                const data = {
                    adv_id: this.ad_id,
                    ...this.addwlProcurementData,
                    update_date: parseTime(new Date())
                }
                this.$post('action/OtherIncome/procurement_save', data)
                    .then(res => {
                        this.$message({message: res.msg, type: 'success'})
                        if (this.addwlProcurementData.id) {
                            this.$set(this.wlProcurementTableData, this.index2, data)
                        } else {
                            this.getOrderDetail("procurement")
                        }
                        this.index2 = 0
                        this.cancel2()
                    })
            },


        }
    }
</script>

<style scoped>
  .order-status {
    margin-bottom: 16px;
    font-size: 24px;
  }
</style>
